<!doctype html>
<html lang="zh-CN" th:replace="admin-layout :: layout(~{::title}, ~{}, ~{::script}, ~{::body}, 'user-list')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户列表</title>
    <script>
        var $table = $("#table");
        var $remove = $("#removeBtn");
        var $update = $("#updateBtn");
        var $examInfo = $("#examInfoBtn");
        var $upPwdBtn = $("#upPwdBtn");
        var $search = $("#searchBtn");
        var selections = []

        $(function () {
            tableList(columns)
        })

        var columns = [{
            checkbox: true
        }, {
            field: 'loginName',
            title: '用户账号',
        }, {
            field: 'name',
            title: '用户姓名',
        }, {
            field: 'gender',
            title: '用户性别',
            formatter: genderFormatter
        }, {
            field: 'type',
            title: '用户类型',
            formatter: typeFormatter
        }]

        function genderFormatter(value, row, index) {
            if (row.gender === "B") {
                return "男";
            } else if (row.gender === "C") {
                return "女";
            } else {
                return "其他";
            }
        }

        function typeFormatter(value, row, index) {
            if (row.type === "A") {
                return "管理员";
            } else {
                return "普通用户";
            }
        }

        function detailFormatter(index, row) {
            console.log(row)
            var html = []
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>')
            })
            return html.join('')
        }

        //操作按钮
        function operateFormatter(value, row, index) {
            return [
                '<a class="btn btn-primary btn-xs" href="/admin/user/update/' + row.id + '">修改</a>',
                '&nbsp;',
                '<a class="btn btn-primary btn-xs" href="/admin/user/reset/password/' + row.id + '">重置密码</a>',
                '&nbsp;',
                '<button type="button" class="btn btn-danger btn-xs removeBtn">删除</button>'
            ].join('')
        }

        //操作按钮事件
        window.operateEvents = {
            'click .removeBtn': function (e, value, row, index) {
                confirmAlert(function () {
                    ajaxJson("/admin/user/ajax/remove", {"id": row.id}, function (res) {
                        if (res.status) {
                            $table.bootstrapTable('remove', {
                                field: 'id',
                                values: [row.id]
                            })
                        }
                    })
                })
            }
        }

        $remove.click(function () {
            confirmAlert(function () {
                var ids = getIdSelections();
                ajaxJson("/admin/user/ajax/delete", {"ids": ids.toString()}, function (res) {
                    if (res.status) {
                        $table.bootstrapTable('refresh')

                        $remove.prop('disabled', true);
                        $update.prop('disabled', true);
                        $examInfo.prop('disabled', true);
                        $upPwdBtn.prop('disabled', true);
                    }
                })
            })
        })

        $update.click(function () {
            var ids = getIdSelections()
            if (ids) {
                location.href = "/admin/user/save?id=" + ids[0]
            }
        })

        $upPwdBtn.click(function () {
            var ids = getIdSelections()
            if (ids) {
                location.href = "/admin/user/update/pwd/" + ids[0]
            }
        })

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table',
            function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
                $update.prop('disabled', !$table.bootstrapTable('getSelections').length)
                $examInfo.prop('disabled', !$table.bootstrapTable('getSelections').length)
                $upPwdBtn.prop('disabled', !$table.bootstrapTable('getSelections').length)

                // save your data, here just save the current page
                selections = getIdSelections()
                // push or splice the selections if you want to save all data selections
            })

        $search.click(function () {
            $("input[name='paperNumber']").val(1);
            $table.bootstrapTable('refresh')
        })
    </script>
</head>
<body>
<!--<ol class="breadcrumb">
    <li class="active">用户列表</li>
</ol>-->
<div>
    <form id="toolbar">
        <input type="hidden" name="page" id="page">
        <div class="row">
            <div class="col-sm-4 col-md-4 col-lg-3">
                <input type="text" class="form-control fyl-clear" name="loginName"
                       placeholder="用户账号">
            </div>
            <div class="col-sm-4 col-md-4 col-lg-3">
                <input type="text" class="form-control fyl-clear" name="name"
                       placeholder="用户姓名">
            </div>
            <!--<div class="col-sm-4 col-md-4 col-lg-3">
                <select name="gender" class="form-control fyl-clear">
                    <option value="">用户性别</option>
                    <option value="A">外星人</option>
                    <option value="B">男</option>
                    <option value="C">女</option>
                </select>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-3">
                <select name="type" class="form-control fyl-clear">
                    <option value="">用户类型</option>
                    <option value="A">管理员</option>
                    <option value="B">普通用户</option>
                </select>
            </div>-->
            <div class="col-sm-4 col-md-4 col-lg-3">
                <button type="button" class="btn btn-primary" id="searchBtn">查询</button>
                <button type="button" class="btn btn-warning" id="clearSearchBtn">清空</button>
            </div>
        </div>
    </form>
</div>
<hr>
<div class="fyl-mb20">
    <a href="/admin/user/save" class="btn btn-primary">添加</a>
<!--    <a href="/admin/user/excel/import" class="btn btn-primary">导入</a>-->
<!--    <button type="button" class="btn btn-primary" id="examInfoBtn" disabled>考试</button>-->
    <button type="button" class="btn btn-primary" id="upPwdBtn" disabled>修改密码</button>
    <button type="button" class="btn btn-primary" id="updateBtn" disabled>修改</button>
    <button type="button" class="btn btn-danger" id="removeBtn" disabled>删除</button>
</div>
<table id="table" data-url="/admin/user/ajax/list"></table>
</body>
</html>